import { Component, createSignal } from 'solid-js';
import { Portal } from 'solid-js/web';
import { Skeleton } from "@/components/ui/skeleton";
import BaseCarousel from "@/components/ui/base-carousel";

interface ScreenshotCarouselProps {
  screenshots?: {
    url: string;
    title: string;
  }[];
  loading?: boolean;
}

const ScreenshotCarousel: Component<ScreenshotCarouselProps> = (props) => {
  const [previewUrl, setPreviewUrl] = createSignal<string | null>(null);

  const renderItem = (screenshot: NonNullable<ScreenshotCarouselProps['screenshots']>[0]) => (
    <div class="w-full h-full aspect-[16/9] cursor-pointer" onClick={() => setPreviewUrl(screenshot.url)}>
      <img 
        src={screenshot.url} 
        alt={screenshot.title} 
        class="w-full h-full object-cover rounded-lg" 
      />
    </div>
  );

  const renderSkeleton = () => (
    <div class="w-full h-full aspect-[16/9]">
      <Skeleton class="w-full h-full rounded-lg" />
    </div>
  );

  return (
    <>
      <BaseCarousel
        items={props.screenshots}
        loading={props.loading}
        renderItem={renderItem}
        renderSkeleton={renderSkeleton}
      />
      
      {previewUrl() && (
        <Portal>
          <div 
            class="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
            onClick={() => setPreviewUrl(null)}
          >
            <img 
              src={previewUrl() || undefined}
              alt="Preview" 
              class="max-w-[90vw] max-h-[90vh] object-contain"
            />
          </div>
        </Portal>
      )}
    </>
  );
};

export default ScreenshotCarousel;